<!DOCTYPE html>
<html lang="zh" xmlns: xmlns: xmlns: xmlns: xmlns: xmlns:>
<head>
    <meta charset="UTF-8">
    <title>vue入门案例</title>
    <!-- 引入vue.js资源-->
    <script type="application/javascript" src="./node_modules/vue/dist/vue.js"></script>
</head>
<!-- vue不能够直接作用在body元素上-->
<body>
        <!--
         v-on指令用于给页面元素绑定事件
         语法:v-on:事件名="js片段或函数名"
         简写:@事件名="js片段或函数"
        -->
    <div id="app">
        <!--事件修饰符,  stop阻止冒泡事件发生
           阻止事件冒泡,如果有两个嵌套的div.都绑定点击事件.我们点击里面的div.然后外面的div也会一并执行.
            在里面的div事件名.stop/阻止冒泡事件.
           -->
        <div @click="div2()" style="background-color: green;width:100px;height: 100px ">
            <div @click.stop="div1()" style="background-color: red;width:50px;height: 50px "></div>
        </div>
        <!--事件修饰符.prevent：阻止默认事件执行/ 就是点击百度不会往百度网站跳 -->
        <a href="https://www.baidu.com" @click.prevent="baidu()">百度一下</a>

    </div>

</body>
<script>
    /*每个vue应用都是通过Vue函数创建一个新的VUE实例开始的.*/
    new Vue({
        el:"#app",//每个Vue实例都需要关联一段HTml模板,Vue会基于此模板进行视图渲染.我们可以通过el属性来指定.
        data:{//当Vue实例被创建时,它会尝试获取在data中定义的所有属性,用于视图的渲染.并且"监视"data中的属性变化,

        },
       // Vue实例中除了可以定义data属性，也可以定义方法，并且在Vue的作用范围内使用。
        methods:{//vue声明的事件方法

            baidu(){
                alert("哈哈哈，被骗了吧");
            },
            div1(){
                console.log("div1事件执行了");
            },
            div2(){
                console.log("div2事件执行了");
            }
        }
    })

</script>
</html>